<template>
  <el-card shadow="hover">
    <div slot="header" class="clearfix">
      <span>套餐详情</span>
      <el-button
        style="float: right"
        type="primary"
        size="small"
        @click="appoint"
        >立即预约</el-button
      >
      <el-button
        style="float: right; margin-right: 10px"
        type="danger"
        size="small"
        @click="cancel"
        >取消预约</el-button
      >
    </div>
    <el-form
      :model="form"
      ref="form"
      label-position="right"
      label-width="100px"
    >
      <el-row :gutter="20">
        <el-col :span="24">
          <el-tabs
            type="border-card"
            v-model="activeName"
            @tab-click="handleClick"
          >
            <el-tab-pane label="预约须知" name="stipulation">
              <el-collapse v-model="appointName" accordion>
                <el-collapse-item
                  title="体检报告：体检报告将于体检后5-7个工作日出具。"
                  name="1"
                >
                  <div style="float: left; color: #8c939d">
                    A、纸质报告可在接到体检中心电话通知后自取，或于体检当日前台登记要求邮寄（邮费自理）
                  </div>
                </el-collapse-item>
                <el-collapse-item title="体检前：注意事项" name="2">
                  <div style="float: left; color: #8c939d">
                    1、体检前一天请您清淡饮食,勿饮酒、勿劳累。体检当天请空腹,禁食。
                  </div>
                  <div style="float: left; color: #8c939d">
                    2、体检前一天要注意休息，晚上8点后不再进食。避免剧烈运动和情绪激动，保证充足睡眠，以免影响体检结果。
                  </div>
                  <div style="float: left; color: #8c939d">
                    3、例假期间不宜做妇科、尿液检查。
                  </div>
                </el-collapse-item>
                <el-collapse-item title="体检中：注意事项" name="3">
                  <div style="float: left; color: #8c939d">
                    1、需空腹检查的项目为抽血、腹部B超、数字胃肠，胃镜及其它标注的体检项目。
                  </div>
                  <div style="float: left; color: #8c939d">
                    2、做膀胱、子宫、附件B超时请勿排尿，如无尿需饮水至膀胱充盈。做妇科检查前应排空尿。
                  </div>
                  <div style="float: left; color: #8c939d">
                    3、未婚女性不做妇科检查；怀孕的女性请预先告知医护人员,不安排做放射及其他有影响的检查。
                  </div>
                  <div style="float: left; color: #8c939d">
                    4、做放射线检查前,请您除去身上佩戴的金银、玉器等饰物。
                  </div>
                  <div style="float: left; color: #8c939d">
                    5、核磁共振检查，应禁止佩带首饰、手表、传呼、手机等金属物品，磁卡也不应带入检查室，以防消磁。
                  </div>
                </el-collapse-item>
                <el-collapse-item title="体检后：注意事项" name="4">
                  <div style="float: left; color: #8c939d">
                    1、全部项目完毕后请您务必将体检单交到前台。
                  </div>
                  <div style="float: left; color: #8c939d">
                    2、请您认真听取医生的建议,及时复查.随诊或进一步检查治疗。
                  </div>
                  <div style="float: left; color: #8c939d">
                    3、请您保存好体检结果，以便和下次体检结果作对照，也可作为您就医时的资料。
                  </div>
                </el-collapse-item>
              </el-collapse>
            </el-tab-pane>
            <el-tab-pane label="基本信息" name="first">
              <el-row :gutter="20">
                <el-col :span="10">
                  <el-form-item
                    label="套餐编码"
                    placeholder="请输入套餐编码"
                    prop="code"
                  >
                    <el-input v-model="form.code" disabled />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item
                    label="套餐名称"
                    placeholder="请输入套餐名称"
                    prop="name"
                  >
                    <el-input v-model="form.name" disabled />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="适用性别" prop="sex">
                    <el-select
                      v-model="form.sex"
                      placeholder="请选择性别"
                      disabled
                      style="width: 100%"
                    >
                      <el-option :value="0" label="不限" />
                      <el-option :value="1" label="男" />
                      <el-option :value="2" label="女" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item
                    label="助记码"
                    placeholder="请输入套餐助记码"
                    prop="helpCode"
                  >
                    <el-input v-model="form.helpCode" disabled />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="适用年龄" prop="age">
                    <el-input v-model="form.age" disabled />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="套餐图片" prop="img">
                    <el-image
                      style="width: 100px; height: 100px"
                      :src="
                        imageUrl.startsWith('https')
                          ? imageUrl
                          : $qiniu + imageUrl
                      "
                      :preview-src-list="preview(imageUrl)"
                    >
                    </el-image>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="套餐说明">
                    <el-input
                      v-model="form.remark"
                      type="textarea"
                      show-word-limit
                      maxlength="100"
                      disabled
                      :autosize="{ minRows: 2, maxRows: 5 }"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="注意事项" prop="value">
                    <el-input
                      v-model="form.attention"
                      type="textarea"
                      show-word-limit
                      disabled
                      maxlength="200"
                      :autosize="{ minRows: 2, maxRows: 5 }"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="检查组信息" name="second">
              <el-table
                :data="groupTableList"
                stripe
                border
                highlight-current-row
                max-height="450"
              >
                <el-table-column type="index" label="序号" width="80">
                </el-table-column>
                <el-table-column prop="code" label="检查组编码" width="180">
                </el-table-column>
                <el-table-column prop="name" label="检查组名称">
                </el-table-column>
                <el-table-column prop="age" label="助记码"> </el-table-column>
                <el-table-column
                  prop="sex"
                  label="适用性别"
                  :formatter="formatSex"
                >
                </el-table-column>
                <el-table-column prop="remark" label="检查项目说明">
                </el-table-column>
                <el-table-column prop="attention" label="检查项目注意事项">
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="检查项信息" name="three">
              <el-table
                :data="itemTableList"
                stripe
                border
                highlight-current-row
                max-height="450"
              >
                <el-table-column type="index" label="序号" width="80">
                </el-table-column>
                <el-table-column prop="code" label="检查项目编码" width="180">
                </el-table-column>
                <el-table-column prop="name" label="检查项名称">
                </el-table-column>
                <el-table-column
                  prop="sex"
                  label="适用性别"
                  :formatter="formatSex"
                >
                </el-table-column>
                <el-table-column prop="age" label="适用年龄"> </el-table-column>
                <el-table-column
                  prop="type"
                  label="检查项目类型"
                  :formatter="formatType"
                >
                </el-table-column>
                <el-table-column prop="remark" label="检查项目说明">
                </el-table-column>
                <el-table-column prop="attention" label="检查项目注意事项">
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
    </el-form>
    <!-- 表单添加/修改 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      @close="dialogClose"
      width="55%"
    >
      <el-form :model="form2" :rules="rules" ref="form">
        <el-col>
          <span style="float: left; font-size: 17px">体检人信息</span>
          <el-divider></el-divider>
        </el-col>
        <el-row>
          <el-col :span="10">
            <el-form-item label="体检人：" prop="name">
              <el-input v-model="form2.name" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">
            <el-form-item label="性别:" prop="sex">
              <el-radio-group v-model="form2.sex">
                <el-radio-button label="男">男</el-radio-button>
                <el-radio-button label="女">女</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="年龄" prop="age">
              <el-input v-model="form2.age" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="邮箱" prop="mail">
              <el-input v-model="form2.mail" placeholder="请输入登录邮箱" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="验证码">
              <el-input v-model="form2.validateCode" placeholder="请输入验证码">
                <el-button
                  slot="append"
                  @click="sendCode"
                  :disabled="yzmState"
                  >{{ yzmText }}</el-button
                >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="15">
            <el-form-item label="身份证号" prop="idCard">
              <el-input
                v-model="form2.idCard"
                type="text"
                placeholder="请输入身份证号码"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="15">
            <el-form-item label="选择预约日期" prop="orderDate">
              <template>
                <el-date-picker
                  v-model="form2.orderDate"
                  align="right"
                  type="date"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </template>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="clickCancel">取 消</el-button>
        <el-button type="primary" @click="clickOk">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
import { isEmail } from "@/utils/validate";
export default {
  name: "stemeal",
  data() {
    return {
      stemealId: this.$route.query.stemealId,
      form: {},
      form2: {
        sex: null,
        name: null,
        mail: null,
        validateCode: null,
        idCard: null,
        orderDate: null,
        setmealId: null,
      },
      activeName: "stipulation",
      appointName: "1",
      imageUrl: null,
      open: false,
      title: "",
      groupTableList: [],
      itemTableList: [],
      rules: {
        yzmCode: [
          { required: true, message: "请输入验证码", trigger: "blur" },
          { min: 2, max: 6, message: "验证码的长为6个字符", trigger: "blur" },
        ],
        mail: [
          {
            required: false,
            validator: (rule, value, callback) => {
              if (!isEmail(value)) {
                callback(new Error("邮箱格式错误"));
              } else {
                callback();
              }
            },
          },
        ],
      },
      yzmText: "发送验证码",
      yzmState: false,
      validateCode: null,
    };
  },
  created() {
    this.CeshiId();
  },
  methods: {
    /** 根据套餐Id查询套餐详情 */
    CeshiId() {
      console.log("传来的Id", this.stemealId);
      this.$ajax.post(`/setmeal/findBySetId/${this.stemealId}`).then((res) => {
        console.log("返回数据", res);
        this.form = res.data.data;
        this.groupTableList = res.data.data.checkGroups;
        this.itemTableList = res.data.data.checkItems;
        this.imageUrl = res.data.data.img;
      });
    },
    /** 标签事件 */
    handleClick(tab, event) {
      console.log(tab, event);
    },
    /** 格式化性别 */
    formatSex(row) {
      if (row.sex === "1") {
        return "男";
      } else if (row.sex === "2") {
        return "女";
      } else {
        return "不限";
      }
    },
    /** 格式化类型 */
    formatType(row) {
      if (row.type === "1") {
        return "检验";
      } else if (row.type === "2") {
        return "检查";
      }
    },
    /** 图片预览*/
    preview(src) {
      let arr = [];
      if (src) {
        if (!src.startsWith("https")) {
          src = this.$qiniu + src;
        }
      }
      // arr.push(src.startsWith('https')?src:this.$qiniu+src);
      arr.push(src);
      return arr;
    },
    /** 跳转套餐选择页 */
    cancel() {
      this.$router.push({ path: "/order/orderList" });
    },
    /** 关闭对话框事件 */
    dialogClose() {
      // 将表单进行重置，并移除校验效果
      this.$refs.form.resetFields();
    },
    /** 点击取消 */
    clickCancel() {
      // 将表单进行重置，并移除校验效果
      this.$refs.form.resetFields();
      this.form2 = {};
      this.open = false;
    },
    /** 点击预约 */
    appoint() {
      this.open = true;
      this.title = "预约信息填写";
    },
    /** 点击确定 */
    clickOk() {
      // 进行表单校验
      this.$refs.form.validate((valid) => {
        // 校验不通过
        if (!valid) {
          return this.$message.error("表单校验失败,请检查后提交！");
        }
        console.log("提交表单数据", this.form2);
        // 校验通过
        this.form2.setmealId = this.stemealId;
        this.$ajax.post("/order/submit/", this.form2).then((res) => {
          this.open = false;
          console.log("返回的form2", res);
          if (res.data.flag) {
            this.$router.push({
              path: "/order/orderSuccess",
              query: { orderId: res.data.data.id },
            });
          }
        });
      });
    },
    /** 发送验证码 */
    sendCode() {
      const pattern = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
      // 判断邮箱是否填写
      if (!this.form2.mail) return this.$message.error("请输入验证邮箱!");
      if (!pattern.test(this.form2.mail))
        return this.$message.error("请输入正确的邮箱!");
      // 发送验证码
      this.$ajax
        .post("/tool/mailCode", { receivers: [this.form2.mail] })
        .then((res) => {
          if (res.data.flag) {
            /**
             * setInterval： 每隔多少秒执行一次
             * setTimeout： 在多少秒后执行一次
             */
            let time = 60;
            const timer = setInterval(() => {
              this.yzmState = true;
              time--;
              if (time) {
                this.yzmText = time + "秒后重新发送";
              } else {
                clearInterval(timer);
                this.yzmText = "重新发送验证码";
                this.yzmState = false;
              }
            }, 1000);
            this.$message.success(res.data.message);
          } else {
            this.$message.error(res.data.message);
          }
        });
    },
  },
};
</script>

<style scoped></style>
